<template>
    <div class="group_read_info m-no-select">
        <div class="check_item">
          <div class="read" :class="{active:activeIndex=='0'}" @click="changeActive('0')">已读情况</div>
          <div class="download" v-if="showDownloadData" :class="{active:activeIndex=='1'}" @click="changeActive('1')">下载情况</div>
        </div>
        <div class="content">
          <div>
              <div v-if="activeIndex=='0'"><span>{{group_unread}}</span>人未读</div>
              <div v-else><span>{{group_unread}}</span>人未下载</div>
              <div style="flex:1;">
                  <div v-for="(item,index) in unreadUsers" :key="index">
                      <div class='list_msg_info' v-if="item.ID!=myInfo.id">
                          <img draggable="false" :src="!$isNull(item.HEAD)?(`${$store.state.headPathUrl}${item.ID}${item.HEAD}.PNG`):`static/image/home/person_${item.GENDER==2?2:1}.png`" :onerror="defaultImg" class="s_person_icon"/>
                          <div class='list_msg_value'>
                              <div>{{item.NAME | setGroupUser}}</div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div>
              <div><span>{{readUsers.length}}</span>{{activeIndex=='0'?'人已读':'人已下载'}}</div>
              <div style="flex:1;">
                  <div v-for="(item,index) in readUsers" :key="index">
                      <div class='list_msg_info'>
                          <img draggable="false" :src="!$isNull(item.HEAD)?(`${$store.state.headPathUrl}${item.ID}${item.HEAD}.PNG`):`static/image/home/person_${item.GENDER ==2?2:1}.png`" :onerror="defaultImg" class="s_person_icon"/>
                          <div class='list_msg_value'>
                              <div>{{item.NAME | setGroupUser}}</div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
	export default {
		props: {
            unreadUsers:{
                type:Array,
                default:[]
            },
            readUsers:{
                type:Array,
                default:[]
            },
            group_read:{
                type:Number,
                default:0
            },
			group_unread:{
                type:Number,
                default:0
            },
            activeIndex:{
              type:String,
              default:'0'
            },
            showDownloadData:{//下载情况是否显示
              type:Boolean,
              default:false
            }
		},
		data() {
			return {
               defaultImg:'this.src="' + require('../../../static/image/home/person_1.png') + '"',
			}
        },
        watch:{
        },
        filters: {
            setGroupUser(str) {
				return str.length > 4 ? str.slice(0, 4) + "..." : str
            }
        },
        computed: {
            ...mapState(["myInfo"]),
        },    
		mounted() {
		},
		methods: {
            changeActive(index){
                console.log('112233',this.readUsers)
              this.$emit('changeActive',index)
            },
		},
		components: {},
		created(){

		}
	}
</script>
